<template>
  <view class="detail-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="navbar-content">
        <view class="navbar-left" @tap="goBack">
          <u-icon name="arrow-left" size="20" color="#333"></u-icon>
        </view>
        <view class="navbar-center">
          <view class="author-card-navbar" @tap="onAuthorTap" v-if="workDetail.author">
            <image v-if="workDetail.author?.avatar" class="author-avatar-navbar" :src="workDetail.author.avatar"
              mode="aspectFill"></image>
            <image v-else class="author-avatar-navbar" src="/static/logo.png" mode="aspectFill"></image>
            <view class="author-info-navbar">
              <text class="author-name-navbar">{{ workDetail.author?.username || '匿名用户' }}</text>
            </view>
          </view>
        </view>
        <view class="navbar-right"></view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-wrapper">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 错误状态 -->
    <view v-else-if="error" class="error-wrapper">
      <text class="error-icon">😕</text>
      <text class="error-text">{{ error }}</text>
      <button class="retry-btn" @tap="loadWorkDetail">重试</button>
    </view>

    <!-- 作品详情 -->
    <scroll-view v-else class="content-scroll" scroll-y>
      <!-- 媒体区域 -->
      <view class="media-section">
        <!-- 图片轮播 -->
        <swiper v-if="workDetail.mediaType === 'image' && workDetail.imagesUrls && workDetail.imagesUrls.length > 0"
          class="image-swiper" indicator-dots :indicator-color="'rgba(255, 255, 255, 0.5)'"
          :indicator-active-color="'#fff'" @tap="previewImages">
          <swiper-item v-for="(image, index) in workDetail.imagesUrls" :key="index">
            <image class="swiper-image" :src="image" mode="aspectFill" :lazy-load="true"></image>
          </swiper-item>
        </swiper>

        <!-- 视频播放 -->
        <view v-else-if="workDetail.mediaType === 'video' && workDetail.videoUrl" class="video-wrapper">
          <video class="video-player" :src="workDetail.videoUrl" :poster="workDetail.videoCover" controls
            :show-center-play-btn="true" :enable-play-gesture="true"></video>
        </view>

        <!-- 无媒体占位 -->
        <view v-else class="no-media-placeholder">
          <text class="placeholder-icon">📷</text>
          <text class="placeholder-text">暂无媒体内容</text>
        </view>
      </view>

      <!-- 内容区域 -->
      <view class="content-section">
        <!-- 标题 -->
        <view class="header-info">
          <view class="title-row">
            <text class="work-title">{{ workDetail.title }}</text>
            <view v-if="workDetail.tags && workDetail.tags.length > 0" class="tags-section-inline">
              <text class="tag-item" v-for="(tag, index) in workDetail.tags" :key="index">
                #{{ tag }}
              </text>
            </view>
          </view>
          <text class="publish-time" v-if="workDetail.publishedAt">
            {{ formatTime(workDetail.publishedAt) }}
          </text>
        </view>

        <!-- 统计数据 -->
        <view class="stats-section card rounded-lg">
          <view class="stat-item">
            <u-icon name="eye" color="#999" size="24"></u-icon>
            <text class="stat-value">{{ workDetail.viewsCount || 0 }}</text>
          </view>
          <view class="action-btn" @tap="onLike">
            <u-icon :name="isLiked ? 'heart-fill' : 'heart'" :color="isLiked ? '#4A90E2' : '#999'" size="24"></u-icon>
            <text class="action-text" :class="{ 'action-text-active': isLiked }">
              <text class="stat-value">{{ workDetail.likesCount || 0 }}</text>
            </text>
          </view>
          <view class="action-btn" @tap="onCollect">
            <u-icon :name="isCollected ? 'star-fill' : 'star'" :color="isCollected ? '#4A90E2' : '#999'"
              size="24"></u-icon>
            <text class="action-text" :class="{ 'action-text-active': isCollected }">
              <text class="stat-value">{{ workDetail.collectionsCount || 0 }}</text>
            </text>
          </view>
          <view class="action-btn" @tap="onComment">
            <u-icon name="chat" color="#4A90E2" size="24"></u-icon>
            <text class="action-text">
              <text class="stat-value">{{ workDetail.commentsCount || 0 }}</text>
            </text>
          </view>
          <view class="action-btn" @tap="onShare">
            <u-icon name="share" color="#4A90E2" size="24"></u-icon>
            <text class="action-text">
              <text class="stat-value">{{ workDetail.sharesCount || 0 }}</text>
            </text>
          </view>
        </view>

        <!-- 描述内容 -->
        <view class="description-section">
          <text class="description-text">{{ workDetail.description }}</text>
        </view>


      </view>
    </scroll-view>

    <!-- 评论弹窗 -->
    <u-popup :show="showCommentPopup" mode="bottom" :round="50" :overlayOpacity="0" minHeight="70%" closeOnClickOverlay>
      <view class="comment-popup">
        <!-- 弹窗头部 -->
        <view class="comment-header">
          <text class="comment-title">评论 ({{ commentsList.length }})</text>
          <u-icon name="close" @click="showCommentPopup = false" size="20"></u-icon>
        </view>

        <!-- 评论列表 -->
        <scroll-view class="comment-list" scroll-y @scrolltolower="loadMoreComments">
          <!-- 加载状态 -->
          <view v-if="commentsLoading" class="comment-loading">
            <text>加载中...</text>
          </view>

          <!-- 空状态 -->
          <view v-else-if="commentsList.length === 0" class="comment-empty">
            <text class="empty-icon">💬</text>
            <text class="empty-text">暂无评论，快来发表第一条评论吧~</text>
          </view>

          <!-- 评论项 -->
          <view v-else class="comment-items">
            <view v-for="comment in commentsList" :key="comment.id" class="comment-item">
              <!-- 评论内容 -->
              <view class="comment-content">
                <image :src="comment.user.avatar || '/static/logo.png'" class="comment-avatar" mode="aspectFill">
                </image>
                <view class="comment-main">
                  <view class="comment-info">
                    <text class="comment-username">{{ comment.user.username }}</text>
                    <text class="comment-time">{{ formatTime(comment.createdAt) }}</text>
                  </view>
                  <text class="comment-text" @tap="onReplyComment(comment)">{{ comment.content }}</text>
                  <view class="comment-actions">
                    <view class="comment-action-btn" @tap="onReplyComment(comment)">
                      <u-icon name="chat" size="16" color="#999"></u-icon>
                      <text>回复</text>
                    </view>
                    <view class="comment-action-btn" @tap="onLikeComment(comment)">
                      <u-icon :name="comment.isLiked ? 'heart-fill' : 'heart'"
                        :color="comment.isLiked ? '#4A90E2' : '#999'" size="16"></u-icon>
                      <text>{{ comment.likesCount || 0 }}</text>
                    </view>
                  </view>
                </view>
              </view>

              <!-- 回复列表 -->
              <view v-if="comment.replies && comment.replies.length > 0" class="comment-replies">
                <view v-for="reply in comment.replies" :key="reply.id" class="reply-item">
                  <image :src="reply.user.avatar || '/static/logo.png'" class="reply-avatar" mode="aspectFill"></image>
                  <view class="reply-main">
                    <view class="reply-info">
                      <text class="reply-username">{{ reply.user.username }}</text>
                      <text v-if="reply.replyToUser" class="reply-to">
                        回复 @{{ reply.replyToUser.username }}
                      </text>
                      <text class="reply-time">{{ formatTime(reply.createdAt) }}</text>
                    </view>
                    <text class="reply-text" @tap.stop="onReplyComment(comment, reply)">{{ reply.content }}</text>
                    <view class="reply-actions">
                      <view class="comment-action-btn" @tap.stop="onReplyComment(comment, reply)">
                        <u-icon name="chat" size="16" color="#999"></u-icon>
                        <text>回复</text>
                      </view>
                      <view class="comment-action-btn" @tap.stop="onLikeComment(reply)">
                        <u-icon :name="reply.isLiked ? 'heart-fill' : 'heart'"
                          :color="reply.isLiked ? '#4A90E2' : '#999'" size="16"></u-icon>
                        <text>{{ reply.likesCount || 0 }}</text>
                      </view>
                    </view>
                  </view>
                </view>
                <view v-if="comment.repliesCount > (comment.replies?.length || 0)" class="load-more-replies"
                  @tap="loadCommentReplies(comment)">
                  <text>展开更多回复 ({{ comment.repliesCount - (comment.replies?.length || 0) }})</text>
                </view>
              </view>
              <!-- 如果没有加载回复，但有回复数，显示加载按钮 -->
              <view v-else-if="comment.repliesCount > 0 && (!comment.replies || comment.replies.length === 0)"
                class="load-more-replies" @tap="loadCommentReplies(comment)">
                <text>查看 {{ comment.repliesCount }} 条回复</text>
              </view>
            </view>
          </view>

          <!-- 加载更多 -->
          <view v-if="hasMoreComments && !commentsLoading" class="load-more-comments">
            <text>上拉加载更多</text>
          </view>
        </scroll-view>

        <!-- 评论输入框 -->
        <view class="comment-input-wrapper">
          <input class="comment-input" v-model="commentContent" :placeholder="commentPlaceholder" border="none"
            :clearable="true" @confirm="submitComment"></input>
          <view class="comment-input-button" :class="{ 'button-disabled': !commentContent.trim() }"
            @tap="!commentContent.trim() ? null : submitComment()">
            <text class="button-text">发送</text>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getWorkDetail, toggleLike, toggleCollect, type WorkInfo } from '@/api/works'
import {
  getWorkComments,
  getCommentReplies,
  createComment,
  likeComment,
  unlikeComment,
  type CommentInfo
} from '@/api/comments'
import { TOKEN_KEY } from '@/config/env'

// 作品详情
const workDetail = ref<WorkInfo>({} as WorkInfo)
// 加载状态
const loading = ref(true)
const error = ref('')
// 操作状态
const isLiked = ref(false)
const isCollected = ref(false)
// 作品ID（从路由参数获取）
const workId = ref<number>(0)
// 状态栏高度
const statusBarHeight = ref(0)

// 评论相关状态
const showCommentPopup = ref(false)
const commentsList = ref<(CommentInfo & { replies?: CommentInfo[]; isLiked?: boolean })[]>([])
const commentsLoading = ref(false)
const commentContent = ref('')
const currentPage = ref(1)
const hasMoreComments = ref(true)
const replyingTo = ref<{ comment?: CommentInfo; user?: { id: number; username: string } } | null>(null)

// 评论输入框 placeholder
const commentPlaceholder = computed(() => {
  if (replyingTo.value?.user) {
    return `回复@${replyingTo.value.user.username}`
  }
  return '文明评论人人有责...'
})

/**
 * 加载作品详情
 */
const loadWorkDetail = async () => {
  if (!workId.value) {
    error.value = '作品ID不存在'
    loading.value = false
    return
  }

  try {
    loading.value = true
    error.value = ''

    const data = await getWorkDetail(workId.value)
    workDetail.value = data

    // 使用接口返回的点赞和收藏状态
    isLiked.value = data.isLiked || false
    isCollected.value = data.isCollected || false

  } catch (err: any) {
    console.error('加载作品详情失败:', err)
    error.value = err instanceof Error ? err.message : '加载失败，请重试'
  } finally {
    loading.value = false
  }
}

/**
 * 预览图片
 */
const previewImages = () => {
  if (workDetail.value.imagesUrls && workDetail.value.imagesUrls.length > 0) {
    uni.previewImage({
      urls: workDetail.value.imagesUrls,
      current: workDetail.value.imagesUrls[0]
    })
  }
}

/**
 * 格式化时间
 */
const formatTime = (timeStr: string): string => {
  if (!timeStr) return ''

  const date = new Date(timeStr)
  const now = new Date()
  const diff = now.getTime() - date.getTime()

  const minute = 60 * 1000
  const hour = 60 * minute
  const day = 24 * hour
  const week = 7 * day
  const month = 30 * day

  if (diff < minute) {
    return '刚刚'
  } else if (diff < hour) {
    return `${Math.floor(diff / minute)}分钟前`
  } else if (diff < day) {
    return `${Math.floor(diff / hour)}小时前`
  } else if (diff < week) {
    return `${Math.floor(diff / day)}天前`
  } else if (diff < month) {
    return `${Math.floor(diff / week)}周前`
  } else {
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
  }
}

/**
 * 返回上一页
 */
const goBack = () => {
  uni.navigateBack()
}

/**
 * 点击作者
 */
const onAuthorTap = () => {
  if (workDetail.value.author) {
    // TODO: 跳转到作者主页
    uni.showToast({
      title: `查看${workDetail.value.author.username}的主页`,
      icon: 'none'
    })
  }
}

/**
 * 检查是否已登录
 */
const checkLogin = (): boolean => {
  const token = uni.getStorageSync(TOKEN_KEY)
  if (!token) {
    uni.showModal({
      title: '提示',
      content: '请先登录后再进行操作',
      showCancel: true,
      confirmText: '去登录',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }
      }
    })
    return false
  }
  return true
}

/**
 * 点赞
 */
const onLike = async () => {
  if (!checkLogin()) return

  if (!workId.value) return

  try {
    const result = await toggleLike(workId.value)

    // 更新状态
    isLiked.value = result.isLiked

    // 更新点赞数
    if (result.action === 'liked') {
      workDetail.value.likesCount = (workDetail.value.likesCount || 0) + 1
    } else {
      workDetail.value.likesCount = Math.max(0, (workDetail.value.likesCount || 0) - 1)
    }

    uni.showToast({
      title: result.message,
      icon: result.action === 'liked' ? 'success' : 'none'
    })
  } catch (error: any) {
    console.error('点赞失败:', error)
    uni.showToast({
      title: error.message || '操作失败，请重试',
      icon: 'none'
    })
  }
}

/**
 * 收藏
 */
const onCollect = async () => {
  if (!checkLogin()) return

  if (!workId.value) return

  try {
    const result = await toggleCollect(workId.value)

    // 更新状态
    isCollected.value = result.isCollected

    // 更新收藏数
    if (result.action === 'collected') {
      workDetail.value.collectionsCount = (workDetail.value.collectionsCount || 0) + 1
    } else {
      workDetail.value.collectionsCount = Math.max(0, (workDetail.value.collectionsCount || 0) - 1)
    }

    uni.showToast({
      title: result.message,
      icon: result.action === 'collected' ? 'success' : 'none'
    })
  } catch (error: any) {
    console.error('收藏失败:', error)
    uni.showToast({
      title: error.message || '操作失败，请重试',
      icon: 'none'
    })
  }
}

/**
 * 打开评论弹窗
 */
const onComment = () => {
  if (!checkLogin()) return
  showCommentPopup.value = true
  if (commentsList.value.length === 0) {
    loadComments()
  }
}

/**
 * 加载评论列表
 */
const loadComments = async (page: number = 1) => {
  if (!workId.value) return

  try {
    commentsLoading.value = true
    const response = await getWorkComments(workId.value, page, 20)

    if (page === 1) {
      commentsList.value = response.data.map(comment => ({
        ...comment,
        replies: [],
        isLiked: false
      }))
    } else {
      commentsList.value.push(...response.data.map(comment => ({
        ...comment,
        replies: [],
        isLiked: false
      })))
    }

    currentPage.value = page
    hasMoreComments.value = page < response.totalPages
  } catch (error: any) {
    console.error('加载评论失败:', error)
    uni.showToast({
      title: error.message || '加载评论失败',
      icon: 'none'
    })
  } finally {
    commentsLoading.value = false
  }
}

/**
 * 加载更多评论
 */
const loadMoreComments = () => {
  if (hasMoreComments.value && !commentsLoading.value) {
    loadComments(currentPage.value + 1)
  }
}

/**
 * 加载评论的回复
 */
const loadCommentReplies = async (comment: CommentInfo) => {
  if (!comment.id) return

  try {
    const response = await getCommentReplies(comment.id, 1, 10)
    const commentIndex = commentsList.value.findIndex(c => c.id === comment.id)
    if (commentIndex !== -1) {
      commentsList.value[commentIndex].replies = response.data.map(reply => ({
        ...reply,
        isLiked: false
      })) as (CommentInfo & { isLiked?: boolean })[]
    }
  } catch (error: any) {
    console.error('加载回复失败:', error)
    uni.showToast({
      title: '加载回复失败',
      icon: 'none'
    })
  }
}

/**
 * 回复评论
 */
const onReplyComment = (comment: CommentInfo, reply?: CommentInfo) => {
  if (reply) {
    // 回复二级评论
    replyingTo.value = {
      comment,
      user: reply.user
    }
  } else {
    // 回复一级评论
    replyingTo.value = {
      comment,
      user: comment.user
    }
  }
  // 清空输入框，让用户自己输入
  commentContent.value = ''
  // 聚焦输入框（小程序中可能需要特殊处理）
}

/**
 * 提交评论
 */
const submitComment = async () => {
  if (!checkLogin()) return

  const content = commentContent.value.trim()
  if (!content) {
    uni.showToast({
      title: '请输入评论内容',
      icon: 'none'
    })
    return
  }

  if (!workId.value) return

  try {
    let finalContent = content

    const data: any = {
      workId: workId.value,
      content: finalContent
    }

    // 如果是回复
    if (replyingTo.value?.comment) {
      data.parentId = replyingTo.value.comment.id
      if (replyingTo.value.user) {
        data.replyToUserId = replyingTo.value.user.id
      }
    }

    const newComment = await createComment(data)

    // 添加到列表
    if (replyingTo.value?.comment) {
      // 二级评论，添加到对应评论的回复列表
      const commentIndex = commentsList.value.findIndex(
        c => c.id === replyingTo.value!.comment!.id
      )
      if (commentIndex !== -1) {
        if (!commentsList.value[commentIndex].replies) {
          commentsList.value[commentIndex].replies = []
        }
        commentsList.value[commentIndex].replies!.push({
          ...newComment,
          isLiked: false
        })
        commentsList.value[commentIndex].repliesCount =
          (commentsList.value[commentIndex].repliesCount || 0) + 1
      }
    } else {
      // 一级评论，添加到列表顶部
      commentsList.value.unshift({
        ...newComment,
        replies: [],
        isLiked: false
      })
    }

    // 更新作品评论数
    workDetail.value.commentsCount = (workDetail.value.commentsCount || 0) + 1

    // 清空输入
    commentContent.value = ''
    replyingTo.value = null

    uni.showToast({
      title: '评论成功',
      icon: 'success'
    })
  } catch (error: any) {
    console.error('提交评论失败:', error)
    uni.showToast({
      title: error.message || '评论失败，请重试',
      icon: 'none'
    })
  }
}

/**
 * 点赞评论
 */
const onLikeComment = async (comment: CommentInfo & { isLiked?: boolean }) => {
  if (!checkLogin()) return
  if (!comment.id) return

  try {
    const wasLiked = comment.isLiked || false
    if (wasLiked) {
      await unlikeComment(comment.id)
      comment.isLiked = false
      comment.likesCount = Math.max(0, (comment.likesCount || 0) - 1)
    } else {
      await likeComment(comment.id)
      comment.isLiked = true
      comment.likesCount = (comment.likesCount || 0) + 1
    }
  } catch (error: any) {
    console.error('点赞评论失败:', error)
    uni.showToast({
      title: error.message || '操作失败',
      icon: 'none'
    })
  }
}

/**
 * 分享
 */
const onShare = () => {
  // TODO: 调用微信分享
  uni.showToast({
    title: '分享功能开发中',
    icon: 'none'
  })
}

// 页面加载时获取作品ID并加载详情
onLoad((options: any) => {
  // 获取状态栏高度
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0

  if (options && options.id) {
    workId.value = parseInt(options.id)
    loadWorkDetail()
  } else {
    error.value = '缺少作品ID参数'
    loading.value = false
  }
})
</script>

<style scoped>
.detail-container {
  width: 100%;
  /* height: 100vh; */
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

/* 自定义导航栏 */
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10rpx);
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.navbar-content {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
}

.navbar-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.navbar-left:active {
  background-color: rgba(0, 0, 0, 0.05);
}

.navbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20rpx;
}

.navbar-right {
  width: 60rpx;
}

/* 导航栏中的作者信息 */
.author-card-navbar {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 8rpx 16rpx;
  border-radius: 40rpx;
  background-color: rgba(0, 0, 0, 0.02);
  transition: background-color 0.2s;
}

.author-card-navbar:active {
  background-color: rgba(0, 0, 0, 0.05);
}

.author-avatar-navbar {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background-color: #f0f0f0;
  flex-shrink: 0;
}

.author-info-navbar {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.author-name-navbar {
  font-size: 26rpx;
  font-weight: 500;
  color: #333;
  line-height: 1.2;
}

/* 加载状态 */
.loading-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

/* 错误状态 */
.error-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30rpx;
  padding: 60rpx;
}

.error-icon {
  font-size: 120rpx;
  opacity: 0.5;
}

.error-text {
  font-size: 28rpx;
  color: #666;
  text-align: center;
}

.retry-btn {
  padding: 20rpx 40rpx;
  background: #4A90E2;
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
}

/* 内容滚动区 */
.content-scroll {
  flex: 1;
  overflow-y: auto;
  padding-top: calc(88rpx + env(safe-area-inset-top));
  /* 为导航栏预留空间 */
  padding-bottom: 150rpx;
  /* 为底部操作栏预留空间 */
}

/* 媒体区域 */
.media-section {
  width: 100%;
  background-color: #000;
}

.image-swiper {
  width: 100%;
  height: 500rpx;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.video-wrapper {
  width: 100%;
  height: 500rpx;
}

.video-player {
  width: 100%;
  height: 100%;
}

.no-media-placeholder {
  width: 100%;
  height: 400rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20rpx;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.placeholder-icon {
  font-size: 120rpx;
  opacity: 0.3;
}

.placeholder-text {
  font-size: 28rpx;
  color: #999;
}

/* 内容区域 */
.content-section {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

/* 标题和作者 */
.header-info {
  display: flex;
  flex-direction: column;
  gap: 9rpx;
}

.title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16rpx;
  line-height: 1.4;
}

.work-title {
  font-size: 44rpx;
  font-weight: bold;
  color: #000;
  flex-shrink: 0;
}

.tags-section-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12rpx;
  flex: 1;
  min-width: 0;
}

.author-card {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.author-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #f0f0f0;
}

.author-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.author-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}

.publish-time {
  font-size: 24rpx;
  color: #999;
}

/* 描述内容 */
.description-section {
  background-color: #fff;
  padding: 30rpx;
  border-radius: var(--radius-lg);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.description-text {
  font-size: 30rpx;
  color: #333;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-all;
}

/* 标签 */
.tags-section {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.tag-item {
  font-size: 26rpx;
  color: #4A90E2;
  background: #E5F3FF;
  padding: 12rpx 24rpx;
  border-radius: 30rpx;
}

/* 位置信息 */
.location-section {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 20rpx 24rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.location-icon {
  font-size: 32rpx;
}

.location-text {
  font-size: 28rpx;
  color: #666;
}

/* 统计数据 */
.stats-section {
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.stat-icon {
  font-size: 40rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
}

.stat-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

/* 底部操作栏 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1rpx solid #e5e5e5;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  padding: 10rpx 20rpx;
  border-radius: var(--radius-md);
  transition: background-color 0.2s;
}

.action-btn:active {
  background-color: #f5f5f5;
}

.action-icon {
  font-size: 40rpx;
}

.action-text {
  font-size: 22rpx;
  color: #666;
  transition: color 0.2s;
}

.action-text-active {
  color: #4A90E2;
  font-weight: 500;
}

/* 评论弹窗样式 */
.comment-popup {
  display: flex;
  flex-direction: column;
  height: 900rpx;
  background-color: #fff;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #e5e5e5;
}

.comment-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.comment-list {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx 30rpx;
}

.comment-loading,
.comment-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  gap: 20rpx;
}

.empty-icon {
  font-size: 80rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.comment-items {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.comment-item {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.comment-content {
  display: flex;
  gap: 20rpx;
}

.comment-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  flex-shrink: 0;
}

.comment-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.comment-info {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.comment-username {
  font-size: 28rpx;
  font-weight: 500;
  color: #999;
}

.comment-time {
  font-size: 24rpx;
  color: #999;
}

.comment-text {
  font-size: 28rpx;
  color: #000;
  line-height: 1.6;
}

.comment-actions {
  display: flex;
  gap: 30rpx;
  margin-top: 8rpx;
}

.comment-action-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 24rpx;
  color: #999;
}

.comment-replies {
  margin-left: 80rpx;
  padding-left: 20rpx;
  border-left: 2rpx solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.reply-item {
  display: flex;
  gap: 16rpx;
}

.reply-avatar {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  flex-shrink: 0;
}

.reply-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.reply-info {
  display: flex;
  align-items: center;
  gap: 12rpx;
  flex-wrap: wrap;
}

.reply-username {
  font-size: 26rpx;
  font-weight: 500;
  color: #999;
}

.reply-to {
  font-size: 24rpx;
  color: #4A90E2;
}

.reply-time {
  font-size: 22rpx;
  color: #999;
}

.reply-text {
  font-size: 26rpx;
  color: #000;
  line-height: 1.5;
}

.reply-actions {
  display: flex;
  gap: 30rpx;
  margin-top: 8rpx;
}

.load-more-replies {
  padding: 16rpx 0;
  text-align: center;
  font-size: 24rpx;
  color: #4A90E2;
}

.load-more-comments {
  padding: 40rpx 0;
  text-align: center;
  font-size: 26rpx;
  color: #999;
}

.comment-input-wrapper {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #e5e5e5;
  background-color: #fff;
}

.comment-input-wrapper .comment-input {
  flex: 1;
}

.comment-input-button {
  min-width: 120rpx;
  height: 64rpx;
  padding: 0 32rpx;
  background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%);
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(30, 64, 175, 0.4);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.comment-input-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.comment-input-button:active::before {
  opacity: 1;
}

.comment-input-button:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 6rpx rgba(30, 64, 175, 0.3);
}

.comment-input-button.button-disabled {
  background: linear-gradient(135deg, #CCCCCC 0%, #B3B3B3 100%);
  box-shadow: none;
  opacity: 0.6;
}

.comment-input-button.button-disabled:active {
  transform: none;
}

.comment-input-button .button-text {
  color: #FFFFFF;
  font-size: 28rpx;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.comment-input-button.button-disabled .button-text {
  color: #FFFFFF;
}
</style>
